<!--
    @作者：814878176@qq.com
    @时间：2020-03-30
    @描述：活动主题2【清明祭祖祈福】 生成海报首页
	@使用："path": "pages/activityTwo/indexNav"
 -->
<template>
	<view>
		<!-- 要有一张背景图定位在底部的 -->
		<image class="uni-image img-bg" mode="widthFix" src="/static/activityTwo/bg_2.png" />
		<view class="content-wrapper">
			<!-- 主题标题图 -->
			<view class="banner">
				<image class="uni-image" mode="widthFix" src="/static/activityTwo/banner.png" />
			</view>
			<!-- 舜帝图像+生成专属祈福海报 -->
			<view class="create-poser">
				<!-- 舜帝图像 -->
				<view class="img-people uni-align-c">
					<image class="uni-image" mode="widthFix" src="/static/activityTwo/people.png" />
				</view>
				<!-- 生产专属祈福海报 -->
				<view class="uni-align-c btn-1">
					<image class="uni-image" @click="goDetailPage()" mode="widthFix" src="/static/activityTwo/btn_2.png" />
				</view>
			</view>
			<view class="uni-p-b-130"></view>
		</view>
		<tabBar :rootPath="'activityTwo'" :pagePath="'/index'"></tabBar>
		<view v-if="!showPage" class="bank-wrapper"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPage: false
			}
		},
		onLoad() {
			setTimeout(()=>{
				this.showPage = true;
			},500)
		},
		methods: {
			// 页面跳转
			goDetailPage() {
				let type = this.$route.query.type || 1;
				let action = '';
				switch (Number(type)) {
					case 1:
						action = 'xiaguancun';
						break;
					case 2:
						action = 'shundiling';
						break;
					case 3:
						action = 'zixiayan';
						break;
					case 4:
						action = 'yongfusi';
						break;
					case 5:
						action = 'shundimiaokaoguyizhigongyuan';
						break;
				}
				let num = localStorage.getItem('feteRank') || 1; // localStorage.getItem('offeringsCount') || 0;
				let pathStr = window.location.protocol + "//" + window.location.host;
				this.$openURL( pathStr + "/static/h5/posterOne.html?type=4&num="+num+"&action=" + action );
				// 祭品数清0
				localStorage.setItem('offeringsCount', 0);
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import "../../common/css/var.styl"   
	.content-wrapper {
		position: absolute;
		top: 0;
		width: 100%;
		.banner {
			position: relative;
			z-index: 9;
		}
		// 舜帝图像+生成专属祈福海报
		.create-poser {
			position: relative;
			z-index: 10;
			margin-top: -64upx;
			.img-people {
				.uni-image {
					width: 661upx;
				}
			}
			.btn-1 {
				margin: 20upx auto 40upx;
				.uni-image {
					width: 527upx;
				}
			}
		}
	}
</style>

